<!-- About -->
{% if site.locale and site.locale != "" and site.locale != nil %}
  <section class="bg-light page-section" id="{{ site.data.sitetext[site.locale].timeline.section | default: "about" }}">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase">{{ site.data.sitetext[site.locale].timeline.title | markdownify | default: "About" }}</h2>
          <h3 class="section-subheading text-muted">{{ site.data.sitetext[site.locale].timeline.text | default: "timeline"}}</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <ul class="timeline">
      {%- assign align = site.data.sitetext[site.locale].timeline.start_align -%}
      {%- for event in site.data.sitetext[site.locale].timeline.events -%}
            {%- if align == "right" -%}
              {%- if event.align and event.align == "left" -%}
                {%- assign align = "right" -%}
                <li>
              {%- else -%}
                {%- assign align = "left" %}
                <li class="timeline-inverted">
              {% endif %}
            {% else %}
              {%- if event.align and event.align == "right" -%}
                {%- assign align = "left" -%}
                <li class="timeline-inverted">
              {%- else -%}
                {%- assign align = "right" %}
                <li>
              {% endif %}
            {%- endif -%}
              <div class="timeline-image">
                <img class="rounded-circle img-fluid" src="{{ event.image }}" alt="{{ event.alt | default: ""}}">
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4>{{ event.year | markdownify }}</h4>
                  <h4 class="subheading">{{ event.title }}</h4>
                </div>
                <div class="timeline-body">
                  <div class="text-muted">{{ event.desc | markdownify }}</div>
                </div>
              </div>
            </li>
		  {% endfor %}	
            
		  {% if site.data.sitetext[site.locale].timeline.end %}	
			<li class="timeline-inverted">
              <div class="timeline-image">
                <h4>{{ site.data.sitetext[site.locale].timeline.end }}</h4>
              </div>
            </li>
		  {% endif %}

          </ul>
        </div>
      </div>
    </div>
  </section>
{% else %}
<section class="bg-light page-section" id="{{ site.data.sitetext.timeline.section | default: "about" }}">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading text-uppercase">{{ site.data.sitetext.timeline.title | markdownify | default: "About" }}</h2>
        <h3 class="section-subheading text-muted">{{ site.data.sitetext.timeline.text | default: "timeline"}}</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <ul class="timeline">
    {%- assign align = site.data.sitetext.timeline.start_align -%}
    {%- for event in site.data.sitetext.timeline.events -%}
          {%- if align == "right" -%}
            {%- if event.align and event.align == "left" -%}
              {%- assign align = "right" -%}
              <li>
            {%- else -%}
              {%- assign align = "left" %}
              <li class="timeline-inverted">
            {% endif %}
          {% else %}
            {%- if event.align and event.align == "right" -%}
              {%- assign align = "left" -%}
              <li class="timeline-inverted">
            {%- else -%}
              {%- assign align = "right" %}
              <li>
            {% endif %}
          {%- endif -%}
            <div class="timeline-image">
              <img class="rounded-circle img-fluid" src="{{ event.image }}" alt="{{ event.alt | default: ""}}">
            </div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h4>{{ event.year | markdownify }}</h4>
                <h4 class="subheading">{{ event.title }}</h4>
              </div>
              <div class="timeline-body">
                <div class="text-muted">{{ event.desc | markdownify }}</div>
              </div>
            </div>
          </li>
    {% endfor %}	
          
    {% if site.data.sitetext.timeline.end %}	
    <li class="timeline-inverted">
            <div class="timeline-image">
              <h4>{{ site.data.sitetext.timeline.end }}</h4>
            </div>
          </li>
    {% endif %}

        </ul>
      </div>
    </div>
  </div>
</section>
{% endif %}
<!-- End About -->
